<template>
  <div>
    <div class="wp">
      <!-- 主体 -->
      <el-card class="aside_card_l">
        <!-- 导航 -->
        <el-row>
          <el-col class="nav_col">
            <div v-for="(item, index) in navTitle" :key="index">
              <el-tag size="small" :class="{ activeCls: item.id === sel }" @click="handlActiveColor(item)">{{ item.name }}</el-tag>
              <el-divider direction="vertical" v-if="index !== 4"></el-divider>
            </div>
          </el-col>
        </el-row>
        <!-- 内容 -->
        <el-row class="ul_list" v-if="filterData">
          <el-col class="list_item" v-for="(item, index) in filterData" :key="index">
            <div class="list_l" @click="goUser(item)">
              <el-avatar
                :size="50 "
                :src="item.author.avatar_url"
              ></el-avatar>
            </div>
            <div class="list_r">
              <div class="list_r_t" @click="goSection(item)">
                <el-tag type="success" size="small" v-if="item.top">置顶</el-tag>
                <el-link :underline="false" class="title_lk">{{ item.title }}</el-link>
              </div>
              <div class="list_r_b" @click="goSection(item)">
                <div class="user_info">
                  <el-link :underline="false">{{ item.author.loginname }}</el-link>
                  <span class="line">|</span>
                  <span>{{ item.create_at | formatCDate }}</span>
                  <span class="line">|</span>
                  <el-tag size="small">{{ item.tab | formatClass }}</el-tag>
                </div>
                <div class="viewed">
                  <el-link
                    :underline="false"
                    icon="el-icon-view"
                  >{{ item.visit_count || 0 }}</el-link>
                  <el-link
                    :underline="false"
                    icon="el-icon-chat-round"
                  >{{ item.reply_count || 0 }}</el-link>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>

        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[10, 20, 40, 60]"
          :page-size="queryInfo.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
        >
        </el-pagination>
      </el-card>
      <el-card class="aside_card_r">
        <!-- 发帖 -->
        <el-row>
          <el-col class="aside_col">
            <el-button
              type="primary"
              class="send_t"
              @click="handlePublishClick"
            >发帖</el-button>
          </el-col>
        </el-row>
        <!-- 时间 -->
        <el-row class="time_row">
          <el-col
            :span="12"
            class="right_time"
          >
            <p>{{ getDay }}</p>
            <p>{{ getMonth }}</p>
            <p>已签到 1 人</p>
          </el-col>
          <el-col
            :span="12"
            class="right_sign"
          >
            <el-button>
              <el-link
                href="javascript:;"
                :underline="false"
              >签到</el-link>
            </el-button>
            <el-button>
              <el-link
                href="javascript:;"
                :underline="false"
              >抽奖</el-link>
            </el-button>
          </el-col>
        </el-row>
        <!-- 板块推荐 -->
        <el-row class="bk_recom pad_top20">
          <el-col>
            <h4 class="bd_bom1">
              <strong>板块推荐</strong>
            </h4>
          </el-col>
        </el-row>
        <!-- 板块内容 -->
        <el-row>
          <el-col class="tj_lk" v-for="(item, index) in tjArr" :key="index">
            <el-link
              icon="el-icon-s-flag"
              :underline="false"
              @click="toTopic(item)"
            >{{ item.name }}</el-link>
          </el-col>
        </el-row>
        <!-- 排行榜 -->
        <el-row class="rank_ls pad_top20 ">
          <el-col>
            <h4 class="bd_bom1">
              <strong>排行榜</strong>
            </h4>
          </el-col>
        </el-row>
        <!-- 排行榜内容 -->
        <el-row class="rank_row_box">
          <el-col class="rank_item" v-for="(item, index) in filterPhData" :key="index">
            <span class="block">{{ index + 1 }}</span>
            <a href="javascript:;" class="phcontent" @click="goSection(item)">{{ item.title }}</a>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      sel: 1,
      navTitle: [
        { id: 1, name: '全部', tab: 'all' },
        { id: 2, name: '精华', tab: 'good' },
        { id: 3, name: '分享', tab: 'share' },
        { id: 4, name: '问答', tab: 'ask' },
        { id: 5, name: '招聘', tab: 'job' }
      ],
      // select 排序选择
      value: '',
      options: [
        {
          label: '默认排序',
          value: '选项一'
        },
        {
          label: '发帖时间',
          value: '选项二'
        }
      ],
      // 分页的数据
      queryInfo: {
        limit: 10,
        page: 1
      },
      total: 0,
      tjArr: [
        { id: 2, name: '精华', tab: 'good' },
        { id: 3, name: '分享', tab: 'share' },
        { id: 5, name: '招聘', tab: 'job' }
      ]
      // allData: [] // 全部数据
    }
  },
  computed: {
    ...mapState(['topicList', 'allData', 'filterVal']),
    // 获取星期几
    getDay () {
      const d = new Date()
      const dd = d.getDay()
      if (dd === 0) {
        return '星期天'
      } else if (dd === 1) {
        return '星期一'
      } else if (dd === 2) {
        return '星期二'
      } else if (dd === 3) {
        return '星期三'
      } else if (dd === 4) {
        return '星期四'
      } else if (dd === 5) {
        return '星期五'
      } else {
        return '星期六'
      }
    },
    // 获取月份
    getMonth () {
      const d = new Date()
      const mm = d.getMonth() + 1
      const dd = (d.getDate() + '').padStart(2, 0)
      return `${mm}.${dd}`
    },
    filterData () {
      return this.allData.filter(item => item.title.includes(this.filterVal))
    },
    filterPhData () {
      return this.allData.filter((item, index) => {
        if (index < 4) {
          return item
        }
      })
    }
  },
  created () {
    this.getAllData()
  },
  methods: {
    getAllData () {
      const tpcArr = JSON.parse(JSON.stringify(this.topicList))
      this.$http.get('/topics', {
        params: this.queryInfo
      }).then(res => {
        const allData = [...res.data.data, ...tpcArr]
        this.total = allData.length
        this.$store.commit('initAllData', allData)
      })
    },
    handlActiveColor (item) {
      this.sel = item.id
      // console.log(item.tab)
      const tpcArr = JSON.parse(JSON.stringify(this.topicList))
      const newTpcArr = tpcArr.filter(t => t.tab === item.tab)
      this.$http.get(`/topics?tab=${item.tab}`, {
        params: this.queryInfo
      })
        .then(res => {
          // this.allData = res.data.data
          if (item.tab === 'all') {
            const allData = [...res.data.data, ...tpcArr]
            this.total = allData.length
            this.$store.commit('initAllData', allData)
          } else {
            const allData = [...res.data.data, ...newTpcArr]
            this.total = allData.length
            this.$store.commit('initAllData', allData)
          }
        })
    },
    // 分页改变
    handleSizeChange (newSize) {
      this.queryInfo.limit = newSize
      this.getAllData()
    },
    // 当前点击的页码
    handleCurrentChange (newPage) {
      this.queryInfo.page = newPage
      this.getAllData()
    },
    // 发帖事件
    handlePublishClick () {
      const token = JSON.parse(window.sessionStorage.getItem('token'))
      if (!token) {
        this.$router.push('/login')
      } else {
        this.$router.push('/home/publish')
      }
    },
    goSection (item) {
      // console.log(item)
      // item.visit_count++
      // this.$store.commit('setTopicCount', item)
      document.documentElement.scrollTop = document.body.scrollTop = 0
      this.$router.push({
        name: 'section',
        params: {
          id: item.id,
          topicLs: item
        }
      })
    },
    // 版块推荐
    toTopic (item) {
      this.handlActiveColor(item)
    },
    // 去用户详情页面
    goUser (item) {
      this.$router.push({
        name: 'user',
        params: {
          name: item.author.loginname,
          user: item
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
/* 中间容器 */
.wp {
  display: flex;
}
/* 主体菜单导航 */
.nav_col {
  display: flex;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid #dcdfe6;
  .el-tag {
    cursor: pointer;
  }
  .activeCls {
    color: #fff;
    background-color: #409eff;
  }
  .el-menu.el-menu--horizontal {
    border-bottom: 0;
  }
  .el-select {
    margin-left: 20px;
  }
}

/* 主体区域内容 */
.list_item {
  display: flex;
  border-bottom: 1px solid #dcdfe6;
  padding-top: 18px;
  padding-bottom: 18px;
  cursor: pointer;
  .list_l {
    margin-right: 8px;
  }
  .list_r {
    flex: 1;
    .list_r_t .el-tag {
      margin-right: 10px;
    }
    .list_r_t .el-link {
      font-size: 16px;
      font-weight: 700;
    }
    .list_r_b {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
    }

    .list_r_b .user_info {
      display: flex;
      align-items: center;
      color: #5c5c5c;
    }

    .list_r_b .user_info .line {
      padding: 0 10px;
    }

    .list_r_b .viewed > .el-link {
      margin-right: 10px;
    }
  }
}

/* 分页 */
.el-pagination {
  margin-top: 20px;
  text-align: center;
}

// 左侧边栏
.aside_card_l {
  flex: 1;
}

/* 右侧边栏 */
.aside_card_r {
  width: 250px;
  margin-left: 10px;
  .aside_col .send_t {
    width: 100%;
    height: 84px;
    background-color: #2ec7bb;
    font-size: 34px;
    border-radius: 0;
  }

  .time_row {
    height: 120px;
    padding-top: 10px;
  }
  .right_time {
    height: 100%;
    text-align: center;
    background-color: #2ec7bb;
    color: #fff;
  }

  .right_time p {
    font-size: 16px;
    margin: 5px;
  }
  .right_time p + p {
    font-size: 26px;
  }
  .right_time p + p + p {
    font-size: 12px;
  }
  .right_sign {
    height: 100%;
    padding-left: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .right_sign .el-button {
    width: 100%;
    height: 48%;
    margin-left: 0;
    border: 2px solid #2ec7bb;
    border-radius: 0;
  }
  .right_sign .el-button .el-link {
    color: #2ec7bb;
    font-size: 20px;
  }

  .el-col h4 {
    padding-bottom: 10px;
  }

  .tj_lk a {
    padding: 5px 0;
  }

  .rank_row_box .rank_item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    font-size: 12px;
    border-bottom: 1px solid #ececec;
  }

  .rank_row_box .rank_item > span {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    margin-right: 10px;
  }

  .rank_row_box .rank_item:nth-child(1) span {
    background-color: rgba(237, 116, 28, 1);
    color: #fff;
  }

  .rank_row_box .rank_item:nth-child(2) span {
    background-color: rgba(243, 172, 39, 1);
    color: #fff;
  }

  .rank_row_box .rank_item:nth-child(3) span {
    background-color: rgba(248, 203, 94, 1);
    color: #fff;
  }

  .rank_row_box .rank_item a {
    flex: 1;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .rank_row_box .rank_item a:hover {
    color: #2ec7bb;
  }
}

@media screen and (max-width: 1000px) {
  .aside_card_r {
    display: none;
  }
}
</style>
